<template>
	<view class="content reg-page">
		<view class="column">
			<text class="title">我的优势</text>
			<text class="text-color">一句话介绍自己，突出核心优势</text>
			<!-- <mTextarea :content="content" style="margin-top: 10upx;" ref="content" pl="请输入内容" :len='150'>
			</mTextarea> -->
			<view class="r-top">
				<textarea :maxlength="len" placeholder-style="color:rgba(153,153,153,1);" v-model="content" :placeholder="pl" />
				<view class="r-top-t">
				 	<view></view>
					<view> {{contentLength}}/{{len}}</view>
				 </view>
			</view>
		</view>
		<view class="btn-row"><button type="primary" class="primary" @tap="register">保存</button></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import mTextarea from '@/components/m-textarea/m-textarea.vue';
import formRuleConfig from '@/config/formRule.config.js';
import graceChecker from '@/common/graceChecker.js';
export default {
	components: {
		mTextarea,
	},
	computed: {
		...mapState(['openId', 'customerInfo']),
		contentLength(){
			return this.content.length;
		}
	},
	data() {
		return {
			id:0,
			content:'',
			len:150,
		}
	},
	onLoad(query) {		
		this.id=query.id;
		if(query.content == "null"){
			this.content = '';
		}else{
			this.content = query.content;
		}
		
	},
	
	methods: {		
		async register() {
			// this.content=this.$refs.content.content;
			let reqBody = {"content":this.content};
			let checkRes = graceChecker.check(reqBody, formRuleConfig.regContentRule);
			if (!checkRes) {
				uni.showToast({
					title: graceChecker.error,
					icon: 'none'
				});
				return;
			}	
		   this.$page.prePage().advantage = this.content;	
		   uni.navigateBack({//返回
			 delta: 1
		   })
	},

	}
};
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
.content {
	background: #fff;
	padding: 20upx;
	box-sizing: border-box;
}

.title{
	font-size: 40rpx;
	font-weight: bold;
}

.btn-row {
	position: fixed;
	bottom: 20upx;
	width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;	
	button {
		background-color: #84C0F4;;
		height: 90upx;
		line-height: 90upx;
		font-size: 34rpx;
		width: 90%;
		margin: 0 auto;
		display: block;
	}
}

textarea{
		height: 400upx;
		width: 100%;
	}
.r-top{
	margin-top: 50upx;
	padding: 10rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	height: 100%;
}
.r-top-t{
	display: flex;
	justify-content: space-between;
	font-family:PingFang SC;
	font-weight:400;
	line-height:20px;
	color:rgba(153,153,153,1);
	opacity:1;
}
</style>
